<template>
  <div class="warpper-box inductionInfo">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise" @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="姓名">
          <a-input placeholder="姓名" v-decorator="['keyword']"></a-input>
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input placeholder="身份证号" v-decorator="['idCard']"></a-input>
        </a-form-item>
        <a-form-item label="邀签状态">
          <a-select v-decorator="['signStatus']" style="width: 200px;" placeholder="状态">
            <a-select-option :key="0">
              全部
            </a-select-option>
            <a-select-option :key="1">
              待邀签
            </a-select-option>
            <a-select-option :key="2">
              已邀签
            </a-select-option>
            <a-select-option :key="3">
              已签约
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="邀签协议模板">
          <a-select v-decorator="['pactTempId']" style="width: 200px;" placeholder="协议模板">
            <a-select-option v-for="item in templateData" :key="item?.uniqueCode">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <div>
        <a-button type="primary" @click="exportTable">导出</a-button>
        <a-button type="primary" @click="downTemplate">邀签模板下载</a-button>
        <a-button type="primary" @click="$refs.createInfo.add(true, enterpriseId, templateData)">添加员工</a-button>
        <a-button type="primary" @click="$refs.inductionAddAll.add(true, enterpriseId)">批量添加</a-button>
        <span style="margin-left: 10px;">
          <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" :disabled="this.selectedRowKeys.length == 0" @confirm="delBatchHandle()">
            <a-button type="danger" :disabled="this.selectedRowKeys.length == 0">批量删除</a-button>
          </a-popconfirm>
        </span>
      </div>
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="staffId" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record, enterpriseId, templateData)">编辑</a>
          <span v-show="record.signStatus !== 3">
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
    <!-- 批量添加员工 -->
    <induction-add-all ref="inductionAddAll" @on-ok="addLoad"></induction-add-all>
    <!-- 邀签模板下载 -->
    <a-modal title="邀签模板下载" v-model="isTemplate" @ok="downloadExcel">
      <div style="margin-bottom: 10px;">请选择邀签协议人员导入模板</div>
      <a-radio-group v-model="protocolType">
        <a-space direction="vertical">
          <span style="cursor: pointer;" @click="protocolChange(1)"><a-radio :value="1"></a-radio>企业协议模版:<br/></span>
          <a-select v-show="protocolType == 1" style="width: 200px;" v-model="templateId" placeholder="协议模板">
            <a-select-option v-for="item in templateData" :key="item?.uniqueCode">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-space>
        <br/>
        <a-space direction="vertical" style="margin-top: 20px;">
          <span style="cursor: pointer;" @click="protocolChange(2)"><a-radio :value="2"></a-radio>园区协议模版:</span>
          <a-select v-show="protocolType == 2" v-model="parkId" @change="parkChange" style="width: 200px;margin-right: 10px;" placeholder="服务商">
            <a-select-option v-for="item in parkList" :key="item.parkId">
              {{ item.parkName }}
            </a-select-option>
          </a-select>
          <a-select v-show="protocolType == 2" style="width: 200px;" v-model="templateId" placeholder="协议模板">
            <a-select-option v-for="item in templateData" :key="item?.uniqueCode">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-space>
      </a-radio-group>
    </a-modal>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./induction_add.vue"
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import InductionAddAll from "./induction_add_all.vue"
import {
  COLUMNS_INDUCTION
} from "./form"
import {
  getTablePage,
  enterprisePactTemplate,
  delStaff,
  batchDeleteEnterpriseStaff,
  downWaitInviteExcel,
  getInductionExport
} from "@/api/human/relationInduction"
import {
  parkRelation
} from "@/api/human/ensurePayOrder"
import {
  getStaffExport
} from "@/api/human/relationStaff"
import { mapGetters,mapActions } from 'vuex'
export default {
  name: 'inductionList',
  components: {
    AddInfo,
    InductionAddAll,
    EnterpriseSelect
  },
  data() {
    return {
      table: {
        columns: COLUMNS_INDUCTION,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      enterpriseId: "",
      enterpriseData: [], // 客户列表
      parkId: undefined,
      parkList: [], // 服务商列表
      isTemplate: false, // 邀签模板开关
      templateId: undefined,
      templateData: [], // 模板列表

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据

      protocolType: 1,
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.getTemplateData();
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      this.selectedRowKeys = [];
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 协议类型切换
    protocolChange(i) {
      if (i == 2) {
        this.getParkRelation();
      }
      this.protocolType = i;
      this.templateId = undefined;
      this.templateData = [];
    },
    // 导出功能
    exportTable() {
      let params = this.events_form.getFieldsValue();
      params.enterpriseId = this.enterpriseId;
      getStaffExport(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业入职员工.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 下载邀签模板
    downTemplate() {
      this.isTemplate = true;
      this.protocolType = 1;
      this.templateId = undefined;
    },
    downloadExcel() {
      if (!this.templateId) {
        return this.$message.warning('请选择模板');
      }
      downWaitInviteExcel({ enterpriseId: this.enterpriseId, templateId: this.templateId }).then(res => {
        const blob = new Blob([res]);
        const fileName = '邀签模板.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      });
    },
    // 获取签约模板列表
    async getTemplateData() {
      let { code, data } = await enterprisePactTemplate({
        enterpriseId: this.enterpriseId,
        parkId: this.parkId
      });
      if (code == 1) {
        this.templateData = data
      }
    },
    // 获取服务商列表
    async getParkRelation() {
      const { code, data } = await parkRelation(this.enterpriseId);
      if (code == "1") {
        this.parkList = data;
      }
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value
      this.getTemplateData();
      this.loadTable(true);
    },
    // 选择服务商
    parkChange(value) {
      this.parkId = value
      this.getTemplateData();
    },
    // 删除员工
    async remove(item) {
      let params = {
        staffId: item.staffId
      }
      const {
        code
      } = await delStaff(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    // 批量删除员工
    async delBatchHandle() {
      let params = {
        staffIds: this.selectedRowKeys
      }
      const { code } = await batchDeleteEnterpriseStaff(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.loadTable(true);
    },
  }
}
</script>
